<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="全屏渐变轮播焦点图" />
<meta name="description" content="全屏渐变模式扩展焦点图，兼容IE6" />
<title>魔蝎 - 全屏渐变扩展轮播</title>
<script type="text/javascript" src="http://mxslide.oschina.mopaas.com/mx-slide/mystatics/js/jquery.min.js"></script>
<script type="text/javascript" src="http://mxslide.oschina.mopaas.com/mx-slide/mystatics/js/mx-slide-min.js"></script>
</head>
<body style="margin:0; padding:0;">

<h1 style="padding:20px 30px;">全屏渐变扩展轮播</h1>
<!-- mx-slide-fade -->
<link rel="stylesheet" type="text/css" href="mystatics/css/mx-fade.css" />
<script type="text/javascript">
mx_slide('#mx-fade').find('.mx-content li').key(1000).num(false).delay(1000).event('click').start(function(i){
	var before = $('#mx-fade .mx-content li:visible').index();	//将要被切换的块
	var e = $('#mx-fade .mx-content li'),
		f = function(elements,css,fn){ elements.stop(true).animate(css, 500, function(){ fn?fn():'' }) };
	
	f( e.eq(before).find('a').first(), {right:'-100%'}, function(){
		f( e.eq(i).find('a').first().css({top:'50px',right:'100%'}), {right:'20%'} ) 
	});
	f( e.eq(before).find('a').last(), {left:'-100%'}, function(){
		f( e.eq(i).find('a').last().css({bottom:'50px',left:'100%'}), {left:'20%'} ) 
	});
	
	/*	
	if( before != -1 ){
		//轮播动画扩展效果
		e.eq(before).find('a').first().stop().animate({right:'-100%'}, 500, function(){
			e.eq(i).find('a').first().css({top:'50px',right:'100%'}).stop().animate({right:'30%'},500);
		});
		e.eq(before).find('a').last().stop().animate({left:'-100%'}, 500, function(){
			e.eq(i).find('a').last().css({bottom:'50px',left:'100%'}).stop().animate({left:'30%'},500);
		});
	}else {
		//首次动画效果
		e.first().find('a').first().css({top:'50px',right:'100%'}).stop().animate({right:'30%'},500);
		e.first().find('a').last().css({bottom:'50px',left:'100%'}).stop().animate({left:'30%'},500);
	}
	*/
});
</script>
<div id="mx-fade">
	<div class="mx-hidden">
	<div class="mx-width">
		<ul class="mx-content">
			<li><img src="mystatics/images/0.jpg" title="" alt="" />
				<a href="">AAAAA</a><a href="">BBBBB</a>
			</li>
			<li><img src="mystatics/images/1.jpg" title="" alt="" />
				<a href="">AAAAA</a><a href="">BBBBB</a>
			</li>
			<li><img src="mystatics/images/2.jpg" title="" alt="" />
				<a href="">AAAAA</a><a href="">BBBBB</a>
			</li>
			<li><img src="mystatics/images/3.jpg" title="" alt="" />
				<a href="">AAAAA</a><a href="">BBBBB</a>
			</li>
			<li><img src="mystatics/images/4.jpg" title="" alt="" />
				<a href="">AAAAA</a><a href="">BBBBB</a>
			</li>
		</ul>
	</div>
	</div>
	<div class="mx-change"></div>
	<div class="mx-key">
		<a href="javascript:;" class="mx-key-back"><</a>
		<a href="javascript:;" class="mx-key-next">></a>
	</div>
</div>
<!-- end -->
<div style="padding:30px;">
<div style="clear:both; height:20px;"></div>
<div style="width:1178px; padding:10px; border:1px solid #d0d0d0; background:#f0f0f0; line-height:26px;">
mx_slide('#mx-fade').find('.mx-content li').key(1000).num(false).delay(1000).event('click').start(function(i){<br/>
　　var before = $('#mx-fade .mx-content li:visible').index();	//将要被切换的块<br/>
　　var e = $('#mx-fade .mx-content li'),<br/>
　　　　f = function(elements,css,fn){ elements.stop(true).animate(css, 500, function(){ fn?fn():'' }) };<br/>
	<br/>
　　f( e.eq(before).find('a').first(), {right:'-100%'}, function(){<br/>
　　　　f( e.eq(i).find('a').first().css({top:'50px',right:'100%'}), {right:'20%'} ) <br/>
　　});<br/>
　　f( e.eq(before).find('a').last(), {left:'-100%'}, function(){<br/>
　　　　f( e.eq(i).find('a').last().css({bottom:'50px',left:'100%'}), {left:'20%'} ) <br/>
　　});<br/>
	<br/>
　　/*	<br/>
　　if( before != -1 ){<br/>
　　　　//轮播动画扩展效果<br/>
　　　　e.eq(before).find('a').first().stop().animate({right:'-100%'}, 500, function(){<br/>
　　　　　　e.eq(i).find('a').first().css({top:'50px',right:'100%'}).stop().animate({right:'30%'},500);<br/>
　　　　});<br/>
　　　　e.eq(before).find('a').last().stop().animate({left:'-100%'}, 500, function(){<br/>
　　　　　　e.eq(i).find('a').last().css({bottom:'50px',left:'100%'}).stop().animate({left:'30%'},500);<br/>
　　　　});<br/>
　　}else {<br/>
　　　　//首次动画效果<br/>
　　　　e.first().find('a').first().css({top:'50px',right:'100%'}).stop().animate({right:'30%'},500);<br/>
　　　　e.first().find('a').last().css({bottom:'50px',left:'100%'}).stop().animate({left:'30%'},500);<br/>
　　}<br/>
　　*/<br/>
});
</div>
<div style="clear:both; height:50px;"></div>
<div>下载地址：<a href="mx_slide.zip" title="点击下载" target="_blank">mx_slide.zip</a></div>
<div style="clear:both; height:10px;"></div>
<p>QQ群：Web前端JavaScript <a target="_blank" href="http://shang.qq.com/wpa/qunwpa?idkey=005e26fc32422224a44a0148c6d4f9d2e7f9b0807e58af168c5a678554c18c6e"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="Web前端-JavaScript" title="Web前端-JavaScript"></a> —— 1929 88681</p>
</div>
</body>
</html>